<template>
	<view class="content">
		<view class="money_box">
			<view class="label">支付金额</view>
			<view class="price">
				<text class="fuhao">￥</text>
				<text>{{data.allprice}}</text>
			</view>
			<!-- <view class="oleprice">
				<text>原价</text>
				<text class="fuhao">￥</text>
				<text>{{data.oldprice}}</text>
			</view> -->
			<view class="bot">
				<text class="label">项目名称</text>
				<text>{{data.name||'开通会员'}}</text>
			</view>
			<!-- <view class="levels">
				<view class="">会员等级</view>
				<view class="level_right">
					<image :src="$oss(level.image)" class="level_right_img" mode=""></image>
					<text>{{level.name}}</text>
				</view>
			</view> -->
		</view>
		<view class="pay_type">

			<!-- #ifdef APP -->
			<view class="item" @click="paytype=0">
				<view class="l">
					<image class="img" src="/static/index/zfb.png" mode=""></image>
					<text>支付宝支付</text>
				</view>
				<image v-if="paytype === 0" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
			<view class="item" @click="paytype=1">
				<view class="l">
					<image class="img" src="/static/index/wx.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<image v-if="paytype === 1" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<view class="item" @click="paytype=2">
				<view class="l">
					<image class="img" src="/static/index/wx.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<image v-if="paytype === 2" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="item" @click="paytype=3">
				<view class="l">
					<image class="img" src="/static/index/wx.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<image v-if="paytype === 3" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
			<!-- #endif -->
			<view class="item" v-if="!data.oldprice" @click="paytype=4">
				<view class="l">
					<image class="img" src="/static/index/yue.png" mode=""></image>
					<text>余额支付(余额：{{data.money}})</text>
				</view>
				<image v-if="paytype === 4" class="selectImg" src="/static/selected.png" mode=""></image>
				<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
			</view>
		</view>
		<bottomBtn text="立即付款" @click="confirm"></bottomBtn>
	</view>
</template>

<script>
	import bottomBtn from '@/components/bottom_btn/bottom_btn.vue'
	export default {
		components: {
			bottomBtn
		},
		data() {
			return {
				paytype: '',
				payTypeList: [{
						name: '余额',
						icon: '/static/index/yue.png'
					},
					{
						name: '微信',
						icon: '/static/index/wx.png'
					},
					{
						name: '支付宝',
						icon: '/static/index/zfb.png'
					},
				],
				data: '',
				level:{}
			}
		},
		onLoad(option) {
			this.data = JSON.parse(option.data)
			this.getInfo(this.data.cate_id, this.data.service_id)
			// #ifdef APP
			this.paytype = 1
			// #endif
			// #ifdef MP
			this.paytype = 2
			// #endif
			// #ifdef H5
			this.paytype = 3
			// #endif
		},
		methods: {
			
			getInfo(cate_id, user_id) {
				return new Promise((resole, reject) => {
					this.$api.post('/settle', {
						cate_id,
						user_id
					}).then(res => {
						if (res.code == 1) {
							resole(res.data)
							this.level = res.data.level
						}
					}).catch((res) => {

					})
				})
			},
			confirm() {
				if(uni.getStorageSync('channel')){
					uni.removeStorageSync('channel')
				}
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				if (this.data.oldprice) {

					this.$api.post('/plus', {
						types: 'plus',
						config_id: this.data.hytcIndex,
						paytype: this.paytype
					}).then(res => {
						if (res.code == 1) {
							// this.$toast(res.msg)
							if (res.code == 1) {
								let data = {
									pay: res.data,
									paytype: this.paytype,
								}
								this.$pay(data).then(res => {
									uni.hideLoading();

									uni.switchTab({
										url: '/pages/my/my'
									})
								}).catch(e => {
									console.log(e);
									uni.hideLoading();
								})
							}
						}
					}).catch((res) => {
						uni.hideLoading();
					})

				} else {
					this.$api.post('/createorder', {
						...this.data,
						paytype: this.paytype
					}).then(res => {
						if (res.code == 1) {
							this.$pay(res.data).then(res => {
								uni.hideLoading();

								uni.switchTab({
									url: '/pages/order/order'
								})
							}).catch(e => {
								uni.hideLoading();
							})
						}
					}).catch((res) => {
						uni.hideLoading();
						
					})
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F7FB;
	}

	.money_box {
		width: 686rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30rpx auto 0;

		.label {
			font-size: 24rpx;
			color: #8D93A5;
			margin: 45rpx 0 25rpx;
		}

		.oleprice {
			color: #999;
			font-size: 24rpx;
			text-decoration: line-through;
		}

		.price {
			color: #E91919;
			font-size: 64rpx;
			font-weight: bold;

			.fuhao {
				font-size: 28rpx;
			}
		}

		.bot {
			width: 622rpx;
			height: 140rpx;
			border-top: 1rpx dashed #DADADA;
			margin-top: 66rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #1C274C;

			.label {
				color: #8D93A5;
			}
		}

		.levels {
			color: #999;
			font-size: 24rpx;
			width: 622rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.level_right{
				display: flex;
				align-items: center;
				.level_right_img{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.pay_type {
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 686rpx;
			height: 140rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 52rpx;
			box-sizing: border-box;
			margin: 30rpx auto 0;

			.l {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;

				.img {
					width: 42rpx;
					height: 38rpx;
					margin-right: 20rpx;
				}
			}

			.selectImg {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>